<template>
  <div class="news">
    <div class="box">
      <div class="news-banner">
        <div class="banner-title">
          <h2>帮助中心</h2>
          <h3>让您更快的学会使用我们的平台</h3>
        </div>
        
      </div>
      <div class="news-container">
        <div class="news-list">
			<div style="margin-top:65px;width:850px;">
				<ArticlesList :items="articlesItems"></ArticlesList>
				<Pagination :pageNo="pageInfo.pageNo" :pageSize="pageInfo.pageSize" :total="total"
				            @change-page="changePage" style="margin: 10px 0" />
			</div>
          
          <div class="list-right">
            
            <hot-news></hot-news>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import HotNews from "@/components/news/HotNews.vue";
import ArticlesList from "@/components/column/ArticlesList.vue";
import { onMounted, reactive, ref } from "vue";
import { getNewsList } from "@/api/news";
import Pagination from "@/components/Pagination.vue";
import { getColumnArticlesList } from "@/api/column";

const articlesItems = ref<any>([]);
const pageInfo = ref<{
  categoryId: string;
  pageNo: number;
  pageSize: number;
  selectDate: string;
}>({
  categoryId: "1979372497841385474",
  // 当前页码
  pageNo: 1,
  // 当前每页显示多少条数据
  pageSize: 5,
  selectDate: "",
});
const singlePage = ref(false);
const hotNews = ref<Array<any>>([]);
const total = ref<number>(0);
const loading = ref<boolean>(false);

onMounted(() => {
  getColumnArt();
});


async function getColumnArt() {
  loading.value = true;
  const res: any = await getColumnArticlesList(pageInfo.value);
  articlesItems.value = res.result?.records;
  if (articlesItems.value.pages == 1) {
    singlePage.value = true;
  }
  total.value = res.result?.total;
  loading.value = false;
}
</script>
<style lang="less" scoped>
@hover_color: #3370ff;

.news_header {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}


.news-banner {
  width: 100%;
  height: 160px;
  background: url("../../assets/img/news/newsbanner.jpg") 50% no-repeat;
  background-size: cover;
  text-align: center;
  padding-top: 30px;

  .banner-title {
    padding-bottom: 30px;

    h2 {
      font-size: 28px;
      line-height: 60px;
      font-weight: 600;
    }

    h3 {
      color: #828282;
      margin-top: 5px;
      font-size: 100%;
      font-weight: 400;
      font-variant: normal;
    }
  }
}

.news-container {
  max-width: 1200px;
  min-height: 580px;
  margin: 0 auto;

  .news-card {
    padding-top: 40px;
    margin: 0 auto 50px auto;
    display: flex;
    justify-content: space-evenly;

    .ant-card {
      width: 280px;
      height: 160px;
      overflow: hidden;
      color: #ffffff;
    }

    .news-card-item {
      width: 280px;
      height: 160px;
      position: relative;
      cursor: pointer;

      .item-mask {
        position: absolute;
        background: linear-gradient(transparent, #030822);
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 50px 20px;
        height: 97px;
        box-sizing: border-box;
      }

      span {
        color: #fff;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }

    .news-card-item:hover img {
      transform: scale(1.02);
    }

    :deep(.ant-card-body) {
      padding: 0;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.4s ease-in-out;
    }
  }

  .news-list {
    position: relative;
    display: flex;
	width:100%;
    justify-content: space-between;
  }

  .news-list:after {
    content: "";
    position: absolute;
    left: 0;
    top: 43px;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
    z-index: 1;
  }


  .list-left {
    width: 860px;
  }

  .list-right {
    margin-left: 50px;

    .search-by-date {
      display: flex;
      height: 50px;
      align-items: center;
      justify-content: flex-end;
      font-size: 14px;
      margin-bottom: 15px;

      p {
        white-space: nowrap;
        position: relative;
      }
    }
  }
}

.ant-picker {
  padding: 4px 11px 4px !important;
}

.name {
  text-overflow: ellipsis;
  overflow: hidden;
  color: black;
}

.desc {
  font-size: 12px;
  color: #b4b4b4;
}
</style>
